<template>
  <div :class="bannerClass">
    <div class="title">查嘌呤</div>
    <div class="search-wrap">
      <search
              @result-click="resultClick"
              @on-change="getResult"
              :results="results"
              v-model="keyword"
              position="absolute"
              auto-scroll-to-top
              top="0px"
              @on-focus="onFocus"
              @on-cancel="onCancel"
              @on-submit="onSubmit"
              ref="search"></search>
    </div>
    <HotArticle></HotArticle>
  </div>
</template>

<script>
  import HotArticle from './HotArticle'
  import { Search } from 'vux'

  export default {
    name: 'hello',
    components: {
      HotArticle,
      Search
    },
    data () {
      return {
        results: [],
        keyword: '',
        bannerClass:'banner',
      }
    },

    methods: {
      //搜索
      setFocus () {
        this.$refs.search.setFocus();
      },
      resultClick (item) {
        window.alert('you click the result item: ' + JSON.stringify(item))
      },

      onSubmit () {
        console.log(submit);
      },
      onFocus () {
        this.$router.push('/search');
      },
      onCancel () {
        console.log('on cancel')
      }
    }
  }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .banner, .banner-zoom{background:#003366;text-align: center;height:280px;padding-top:20px}
  .banner-zoom{height:46px;overflow: hidden;padding-top:0;}
  .title{font-size:2rem;color:#fff;}
  .search-wrap{padding:20px;}

</style>
